import React from 'react';

/**
 * 注意: 触发更新生命周期需满足三个条件之一:
 * 1. 调用了state
 * 2. 页面强制刷新 forcaUpdate()
 * 3. 接收了新的props
 */

class Handler extends React.Component {
  state = {
    age: 2
  }
  // componentDisUpsate接收两个参数, 参数的顺序不能出错
  // 第一个参数是: prevProps --- 更新之前的props
  // 第二个参数是: prevState --- 更新之后的state
  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate: 我是更新阶段第二个执行的生命周期')
    console.log(prevProps, prevState)
    
    // 注意: 
    // 1. 在componentDidUpdate生命周期中, 不能直接使用setState
    // 2. 如果想要使用setState, name必须将setState放在if条件中
    // 3. if条件可以是自己的业务逻辑, 也可以是前后props或者state的对比
    // this.setState({
    //   age: this.state.age + 1
    // })

    // 以下为正确写法:
    if (prevState.age === this.state.age) {
      // 没有具体含义, 单纯演示 setState 使用必须放在if条件中
      this.setState({
        age: this.state.age + 2
      })
    }
  }
  changeAge = () => {
    this.setState({
      age: this.state.age + 1
    })
  }
  render() {
    console.log('render: 我是更新阶段第一个执行的生命周期')
    return(
      <div>
        <p>更新阶段的生命周期</p>
        <h4>{ this.state.age }</h4>
        <button onClick={this.changeAge}>更新</button>
      </div>
    )
  }
}

export default Handler